<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style id="cssa">
		*{margin: 0;padding: 0;list-style: none;}

		.Carousel{
			width: 600px;
			height: 300px;
			margin:100px auto;
			perspective: 800px;}
		.Carousel ul.show{
			width: 100%;
			height: 100%;
			transform-origin: center center -150px;

			
			}
		.Carousel ul.show li{
			
			position: relative;
			transform-style: preserve-3d;
			transform: translateZ(-150px;)
			box-sizing: border-box;
			float: left;
			
		}
		
		.Carousel ul.show li div{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.Carousel ul.show li div:nth-child(1){
			top: -300px;
			background: url("img/1.jpg");
			transform-origin: bottom;
			transform: translateZ(150px) rotateX(90deg);
		}
		.Carousel ul.show li div:nth-child(2){
			top: 300px;
			background: url("img/2.jpg");
			transform-origin: top;
			transform: translateZ(150px) rotateX(-90deg);
		}
		.Carousel ul.show li div:nth-child(3){
			background: url("img/3.jpg");
			transform: translateZ(150px);
		}
		.Carousel ul.show li div:nth-child(4){
			background: url("img/4.jpg");
			transform: translateZ(-150px) rotateX(180deg);
		}


		.Carousel ul.tab{
			width: 120px;
			height: 25px;
			position: absolute;
			right: 5px;
			bottom: 5px;
			display: flex;
		}
		.Carousel ul.tab li{
			width: 20px;
			height: 20px;
			background: gray;
			margin:auto;
			text-align: center;
			color: white;
			border-radius: 50%;
			cursor: pointer;
		}
		.Carousel ul.tab li.on{
			background: red;
			color: yellow;
		}

		
	</style>
	<style id="css">
		.Carousel ul.show li{transform:translateZ(-150px) rotateX(0deg);
	</style>
</head>
<body>
	<div class="Carousel">
		<ul class="show">
			
		</ul>
		<ul class="tab">
			<li class="on">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</body>
<script>
var Carousel=document.getElementsByClassName('Carousel')[0];
var show=document.getElementsByClassName('show')[0];
var tabli=document.querySelectorAll('.Carousel .tab li');
var num=0;
var Width=600/30;
var Dhtml="";
var pHTML="";
var tHTML="";
var zHTML="";
var z=0;
var Debris="";
var timer=setInterval(run,3000);

	Carousel.onmousemove=function(){clearInterval(timer);}
	Carousel.onmouseout=function(){timer=setInterval(run,2000);};
	generate();
function generate(){
			for(var n=0;n<30;n++){
					if (n>=30/2) {
						z--;
						zHTML+=".Carousel ul.show li:nth-child("+(n+1)+"){z-index:"+z+";}";
					}
					 Debris+="<li><div></div><div></div><div></div><div></div></li>";
					pHTML+=".Carousel ul.show li:nth-child("+(n+1)+") div{background-position-x:"+(-n*Width)+"px;}"
					tHTML+=".Carousel ul.show li:nth-child("+(n+1)+"){ transition:0.9s "+(0.03*n)+"s}";
				}

				show.innerHTML=Debris;
				cssa.innerHTML+=pHTML+zHTML+tHTML+".Carousel ul.show li,.Carousel ul.show li div{ width:"+Width+"px;height:100%;}";
				
			}


	var showli=show.getElementsByTagName('li');

	for(var i=0;i<tabli.length;i++){
		tabli[i].index=i;
		tabli[i].onmousemove=function(){
			num=i;
		css.innerHTML=".Carousel ul.show li{transform:translateZ(-150px) rotateX("+(this.index*90)+"deg)";
			
		
		for(var j=0;j<tabli.length;j++){
			tabli[j].className="";
		}
		this.className="on";
	}

	}

	function run(){
		num++;
		num%=4;
		css.innerHTML=".Carousel ul.show li{transform:translateZ(-150px) rotateX("+(num*90)+"deg);}";
		for(var i=0;i<tabli.length;i++){
			tabli[i].className="";
		}
		tabli[num].className="on";
}
</script>
</html>